<template>
  <div class="purchaseMembership">
    <div class="purchaseMembership_tit">
      <div>古德温救我，把足球当理财</div>
      <div>一个做了10年足球分析推单的老球迷</div>
      <div>所有推单在我投注后才会分享给大家</div>
      <div>投注订单均可查看，玩的就是真实</div>
    </div>
    <div class="add_gold" v-if="+$is_vip!==2">
      <div v-for="(item,index) in list" :key="item.id" :class="item.id===select?'add_login_select':'add_login_no_select'" @click="select = item.id">
        <div class="price_jin">{{item.title}}</div>
        <div class="price_jia">{{item.price}}</div>
        <span class="price_jia_logo">{{item.numSel}}%选择</span>
      </div>
      <!--      <div>-->
      <!--        <div class="price_jin">300金币</div>-->
      <!--        <div class="price_jia">300金币</div>-->
      <!--      </div>-->
      <!--      <div>-->
      <!--        <div class="price_jin">1000金币</div>-->
      <!--        <div class="price_jia">1000金币</div>-->
      <!--      </div>-->
    </div>
    <div class="add_vip_txt">
      <div class="">开通会员后，请返回首页后</div>
      <div class="">再次刷新界面，即可查看蛇货协议球</div>


    </div>
    <div v-if="+$is_vip===1" class="add_vip_but" @click="openVip">开通会员</div>
    <div v-if="+$is_vip===2" class="add_vip_but" >已开通会员</div>

    <van-popup v-model:show="showCenter" position="center" style="height: 189px;width:330px;padding: 8px;background-color: #E4E4E4;border-radius: 4px" >
      <div class="prop_vip">

        <div>开通蛇货协议球
          <span v-if="select===1">月会员</span>
          <span v-if="select===2">7天会员</span>
          <span v-if="select===3">1天会员</span>

        </div>
        <div>
          <span v-if="select===1">88</span>
          <span v-if="select===2">58</span>
          <span v-if="select===3">28</span>

          金币</div>
        <div>您的余额：{{wallet}}</div>
      </div>
      <div @click="giveVip" class="add_vip_but" style="margin-top: 20px">开通会员</div>


    </van-popup>



  </div>
</template>

<script lang="ts" setup>
import { ComponentInternalInstance, getCurrentInstance } from 'vue';

import { ref, reactive ,onMounted} from "vue";
import {useRouter} from "vue-router";
import {UserWallet,UserExpend} from "@/api/mock";
import {showFailToast,showSuccessToast} from "vant";
const { proxy } =  getCurrentInstance() as ComponentInternalInstance

const router = useRouter()
const wallet = ref(0)
onMounted(() => {
  userWallet()
  // payChannelList()
})
// const userExpend = (e)=>{
//
// }
const giveVip = ()=>{



  let pa = {
    user_id:localStorage.getItem("token"),
    product_name:'充值会员',
    pay_money:0
  }


  if(+select.value===1){
    pa.pay_money = 88
  }
  if(+select.value===2){
    pa.pay_money = 58
  }
  if(+select.value===3){
    pa.pay_money = 28
  }
  if(wallet.value < pa.pay_money){
    showFailToast('金额不足请充值')
    router.push({
      path: "/recharge",
      query: {
        mode: "",
      },
    });
    return;
  }

  if(!pa.user_id){
    router.push({
      path: "/login",
      query: {
        mode: "",
      },
    });
    return
  }
  UserExpend(pa).then(res=>{
    if(+res.code===200){
      if(res.msg==='购买成功'){
        proxy.$sayIs_vip(2)
      }
      router.push({
        path: "/index",
        query: {
          mode: "",
        },
      });
      showSuccessToast('购买成功')
    }
  })

}
const userWallet = ()=>{

  let pa = {
    user_id:localStorage.getItem("token")
  }
  if(!pa.user_id){
    router.push({
      path: "/login",
      query: {
        mode: "",
      },
    });
    return
  }
  console.log(pa)
  UserWallet(pa).then(
      (res) => {
        if (+res.code === 200){
          // userLI.value = res.data
          wallet.value = res.data.wallet
          proxy.$sayIs_vip(res.data.is_vip)
          // if(+res.data.is_vip === 2){
          //   router.push({
          //     path: "/index",
          //     query: {
          //       mode: "",
          //     },
          //   });
          //   showSuccessToast('您已是会员')
          // }
          // proxy.$sayIs_vip(res.data.is_vip)


          // toLogin()
        }else{
          showFailToast(res.msg);

        }

      },
      err => {
        console.log(err);
        // showFailToast("请求有误");
      }
  );
}

const openVip = ()=>{
  showCenter.value = true
}
const toIndex = ()=>{
  router.push({
    path: "/index",
    query: {
      mode: "",
    },
  });
}
const showCenter = ref(false)

const list = ref([
  {
    title:'月会员',
    price:'88金币',
    num:88,
    numSel:88,
    id : 1
  },
  {
    title:'7天会员',
    price:'58金币',
    num:58,
    numSel:58,
    id : 2
  },
  {
    title:'1天会员',
    price:'28金币',
    numSel:28,
    num:28,
    id : 3
  },
]);
const select = ref(1)

</script>

<style scoped lang="less">
.prop_vip{
  color: #1A674E;
  margin-top: 20px;
  font-weight: 400;
  font-size: 13px;
  text-align: center;
}
.add_vip_but{
  width: 267px;
  height: 50px;
  line-height: 50px;
  color: #fff;
  margin: 16px auto 0;
  text-align: center;
  background-color: #1A674E;
  border-radius: 8px;
  //margin-top: 20px;
}
.add_vip_txt{
  margin-top: 22px;
  font-weight: 400;
  font-size: 13px;
  color: #fff;
  text-align: center;
}
.price_jia_logo{
  font-weight: 400;
  font-size: 12px;
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  text-align: center;
  width: 100%;
  background-color: #222325;
  color: #B9B9B9;
  border-radius: 0 0 4px 4px;
}
.add_login_no_select{
  border: 1px solid #4B4B4B;
  position: relative;
}
.price_jin{
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
  margin-top: 6px;
  color: #D9D9D9;
  //line-height: 28px;
}
.price_jia{
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  margin-top: 12px;
  color: #fff;
}
.add_login_select{
  border: 1px solid #348775;
  position: relative;
}
.add_gold{
  color: #fff;
  width:100%;
  padding:0 10px 0 10px;
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  >div{
    background-color: #373737;
    width: calc(33% - 4px);
    border-radius: 4px;
    height: 103px;
    //display: flex;
    //flex-direction:column;
    //justify-content: center;
    >div{
      text-align: center;
      width: 100%;
      //height: 100%;

    }
  }
}


.purchaseMembership{
  .purchaseMembership_tit{
    margin-top: 20px;
    >div{
      text-align: center;
      font-size: 16px;
      color: #fff;
      font-weight: 400;
      line-height: 26px;
    }
  }
}

</style>
